window.onload = function () {
    var username = localStorage.getItem('username')
    var password = localStorage.getItem('password')
    var goHome = document.querySelector('.footer_guide_home')
    var goCategory = document.querySelector('.footer_guide_category')
    var goMyself = document.querySelector('.footer_guide_myself')
    var goShopping = document.querySelector('.footer_guide_shopping')
    goHome.addEventListener('click', function () {
        location.href = './Index.html'
    })
    goCategory.addEventListener('click', function () {
        location.href = './Category.html'
    })
    goMyself.addEventListener('click', function () {

        if (username != null && password != null) {
            location.href = './MySelf.html'
        } else {
            location.href = './LoginBySecret.html'
        }
    })
    goShopping.addEventListener('click', function () {
        if (username != null && password != null) {
            location.href = './Shopping.html'
        } else {
            location.href = './LoginBySecret.html'
        }
    })
    // var head=document.querySelector('.head')
    var startX, startY, moveX, moveY, x, y;
    var headGuideBackground = document.querySelector('.head_guide_background')
    var ul = headGuideBackground.children[0]
    var w = headGuideBackground.offsetWidth
    var index = 1
    var ol = headGuideBackground.querySelector('ol')

    var timer = setInterval(function () {
        if (index >= 3) {
            index = 0
        } else if (index < 0) {
            index = 2
        }
        index += 1
        var translatex = -index * w
        ul.style.transition = 'all 1s'
        ul.style.transform = 'translateX(' + translatex + 'px)'
    }, 3000);
    ul.addEventListener('transitionend', function () {
        if (index >= 3) {
            index = 0
            var translatex = -index * w
            ul.style.transition = 'none'
            ul.style.transform = 'translateX(' + translatex + 'px)'
        } else if (index < 0) {
            index = 2
            ul.style.transition = 'none'
            var translatex = -index * w
            ul.style.transform = 'translateX(' + translatex + 'px)'
        }
        ol.querySelector('.head_guide_background_first_li').classList.remove('head_guide_background_first_li')
        ol.children[index].classList.add('head_guide_background_first_li')
    })
    var flag = false
    headGuideBackground.addEventListener('touchstart', function (e) {
        //计算手指触摸最开始的位置
        e.preventDefault()
        clearInterval(timer)
        startX = e.targetTouches[0].pageX;
        startY = e.targetTouches[0].pageY;
        //距离body的最开始的位置
        x = this.offsetLeft
        y = this.offsetTop
    })
    headGuideBackground.addEventListener('touchmove', function (e) {
        //计算手指移动的距离，当前的减去一开始的
        moveX = e.targetTouches[0].pageX - startX
        moveY = e.targetTouches[0].pageY - startY
        var translatex = -index * w + moveX
        ul.style.transition = 'none'
        ul.style.transform = 'translateX(' + translatex + 'px)'
        flag = true
        e.preventDefault()
    })
    ul.addEventListener('touchend', function () {
        if (flag) {
            if (Math.abs(moveX) > 50) {

                if (moveX > 0) {
                    index--
                } else {
                    index++
                }
                var translatex = -index * w
                ul.style.transition = 'all .3s'
                ul.style.transform = 'translateX(' + translatex + 'px)'
            } else {
                var translatex = -index * w
                ul.style.transition = 'all .1s'
                ul.style.transform = 'translateX(' + translatex + 'px)'
            }
        }
        clearInterval(timer)
        var timer = setInterval(function () {
            index++
            var translatex = -index * w
            ul.style.transition = 'all 0.3s'
            ul.style.transform = 'translateX(' + translatex + 'px)'
        }, 2000);
    })
    var goBack = document.querySelector('.head_guide_back_top')
    var judge = document.querySelector('.introduce_resume')
    window.addEventListener('scroll', function () {
        if (window.pageYOffset >= judge.offsetTop) {
            goBack.style.display = 'block'
        } else {
            goBack.style.display = 'none'
        }
    })
    goBack.addEventListener('click', function () {
        window.scroll(0, 0)
    })
    var everyIntroduce = document.querySelectorAll('.introduce_box_in')
    for (var i = 0; i < everyIntroduce.length; i++) {
        everyIntroduce[i] = this
        everyIntroduce[i].addEventListener('click', function () {
            var img = this.querySelector('img')
            var title = this.querySelector('.introduce_box_in_first').innerText
            console.log(title)
            console.log(img.src)
            localStorage.setItem('img', img.src)
            localStorage.setItem('title', title)
            location.href = './Concrete.html'
        })
    }
    var refer = document.referrer
    var findImg = localStorage.getItem('userImg')
    if (username != '' && password != '' && refer == 'http://127.0.0.1:5500/LoginBySecret.html') {
        var changeImg = document.querySelectorAll('.footer_guide_in_top')[2]
        var imgSrc = changeImg.querySelector('img')
        var randomNumber = Math.floor(Math.random() * (3 - 1))
        var imgAll = [
            "./Images/headImg1.jpg",
            "./Images/headImg2.jpg",
            "./Images/headImg3.jpg"
        ]
        for (var i = 0; i < imgAll.length; i++) {
            if (randomNumber == i) {
                findImg = imgAll[i]
                console.log('userImg', findImg)
                localStorage.setItem('userImg', findImg)
                break
            }
        }
        imgSrc.setAttribute('src', findImg)
    }
    if (findImg == null) {
        document.querySelector('.footer_guide_myself').children[0].children[0].src = './Images/headImg1.jpg'

    } else {
        document.querySelector('.footer_guide_myself').children[0].children[0].src = findImg
    }
    window.addEventListener('resize', function () {
        window.location.reload('.head_guide_background')
    })
    var pathName = window.location.pathname
    var footerAll = document.querySelectorAll('.footer_guide_in_top')
    if (pathName.includes('Index')) {
        var indexImg = './Images/replaceIndex.png'
        var index1 = './Images/home2.png'
        changeImgAndText(footerAll[0], indexImg, index1)

    } else if (pathName.includes('Category')) {
        var categoryImg = './Images/replaceCategory.png'
        var category = './Images/categoey.png'
        changeImgAndText(footerAll[1], categoryImg, category)
    } else if (pathName.includes('Shopping')) {
        var shoppingImg = './Images/replaceShopping.png'
        var shopping = './Images/shoppingCar.png'
        changeImgAndText(footerAll[3], shoppingImg, shopping)
    }

    function changeImgAndText(element, replaceImg, orginImg) {
        var currentImg = element.children[0].src
        if (currentImg.includes('replace')) {
            element.children[0].src = orginImg
            element.nextSibling.nextSibling.style.color = 'black'
        } else {
            element.children[0].src = replaceImg
            element.nextSibling.nextSibling.style.color = 'orangered'
        }
    }
    var arrow_left = document.querySelector('.arrow_left')
    var arrow_right = document.querySelector('.arrow_right')

    let isDisableRight = true
    let isDisableLeft=true
    arrow_left.addEventListener('touchend', function () {
        console.log('login')
        if(isDisableLeft){
            isDisableLeft=false
        clearInterval(timer)
        if (index >= 3) {
            index = 0
        } else if (index < 0) {
            index = 2
        }
        index--
        var translatex = index * w
        ul.style.transition = 'all .1s'
        ul.style.transform = 'translateX(' + translatex + 'px)'
        clearInterval(timer)
        var timer = setInterval(function () {
            index++
            var translatex = -index * w
            ul.style.transition = 'all 1s'
            ul.style.transform = 'translateX(' + translatex + 'px)'
        }, 3000);
        setTimeout(() => {
            isDisableLeft=true

        }, 3000);
    }
    })
    arrow_right.addEventListener('touchstart', function () {
        if (isDisableRight) {
            isDisable = false
            clearInterval(timer)
            if (index >= 3) {
                index = 0
            } else if (index < 0) {
                index = 2
            }
            index++
            var translatex = -index * w
            ul.style.transition = 'all .3s'
            ul.style.transform = 'translateX(' + translatex + 'px)'
            clearInterval(timer)
            var timer = setInterval(function () {
                index++
                var translatex = -index * w
                ul.style.transition = 'all 1s'
                ul.style.transform = 'translateX(' + translatex + 'px)'
            }, 3000);
           setTimeout(()=>{

            isDisableRight=true
           },3000)
        }
    })
}
